.navbar {
padding: 5px;
background-color: rgb(255, 255, 255);
}


.navbar-collapse {
align-items: center;
justify-content: space-between;
}


/*Serveix per la adaptació en mòbils.*/
@media screen and (max-width: 768px) {
.navbar-brand {
display: none;
}
}


.myself { 
background-color:rgb(248, 212, 246);
min-height: 400;
text-align: center;
}


.myself-inferior img {
width: 50%;
}


section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}


p  {
color: black;
font-size: 20px;
font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
text-align: center;
}


h1 {
color:rgb(75, 133, 204);
font-size: 3.5vw;
font-family: "Emilys Candy", serif;
font-weight: 400;
font-style: normal;
}


.myself h2 {
font-size: 2.0vw;
color: #eb4394;
}


.myself img {
border-radius: 100%;
margin-top: 30px;
}


.dark-section {
color: white;
background-color: #b6b6f5;
padding-bottom: 50px;
padding-top: 50px;
}


.about-me div {
max-width: 600px;
}


.section-title {
font-size:clamp(14px,2.5vw,50px);
font-family: "Emilys Candy", serif;
padding: 25px 0;
text-align: center;
color: rgb(0, 0, 0);
}


.section-text {
font-size: 1.5vw;
padding: 20px 5;
}


@media screen and (max-width: 768px) {
.navbar-brand {
display: none;
}


.about-me {
height: 200px;
}


.btn-responsive {
font-size: 11px; 
padding: 6px 12px;
}
}


.white-section {
color: black;
background-color: rgb(248, 212, 246);
}


.experiencia-title {
font-size:clamp(14px,2.5vw,100px);
font-weight: bold;
margin: 10px 0;
}


.experiencia i {
font-size:clamp(14px,2vw,50px);
color: #000000;
background-color: rgb(248, 212, 246);
padding: 8px 19px;
border-radius: 50%;
}


.experiencia {
font-size:clamp(12px,1.5vw,50px);
padding: 40px 40px 60px 40px;
}


.columna {
margin-bottom: 10px;
}


/*Estils de les badges de les tecnologies.*/
.badges-contenidor {
font-size:clamp(12px,1.5vw,50px);
font-weight: bold;
margin: 10px 0;
}


.badge {
margin: 5px;
}


/*Efecte hover en les columnes de experiencia*/
.experiencia .columna:hover {  
color:white;
background-color: #ef4fbc;
border: 2px solid #ffffff;
}


.experiencia .columna {
margin-bottom: 10px;
padding: 20px;
border: 2px solid #0000004d;
transition: all 0.3s ease-in;
}


.black-text {
color:black;
}


.section-description {
font-size:clamp(14px,2vw,50px);
color: #ea60bc;
}


.projectes {
padding: 40px;
}


.projectes img {
width: 100%;
height: 100%;
padding: 10px;
border-radius: 10px;
display: block;
transition: all 0.3s ease;
object-fit: cover;
aspect-ratio: 2;
}


.projectes-container {
padding-top: 60px;
margin-bottom: 40px;
}


/*Efecte hover en les imatges dels projectes*/
.overlay {
transition: all 0.3s ease;
opacity: 0;
position:absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}


.overlay p {
font-size: clamp(14px,2.5vw,30px);
margin-bottom: 0;
}


.projecte {
position: relative;
}


.projecte:hover img {
opacity: 0.2;
}


.projecte:hover .overlay {
opacity: 1;
}


.overlay .icones-contenidor {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}


.overlay i {
color: black;
font-size: 60px;
margin: 10px
}


.video {
position: relative;
width: 100%;
padding-top: 55.00%;  
}


.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


.projecte h2 {
font-size:clamp(19px,2.5vw,30px);
margin: 10px 0;
}


.projecte p {
font-size:clamp(14px,2vw,20px);
}
footer {
min-height: 100px;
border-radius: 80px;
}


.footer-logo {
height: 80px;
width: 80px;
border-radius: 50px;
}


.footer-text {
margin-bottom: 5px;
font-size:clamp(14px,2.5vw,50px);
font-family: "Emilys Candy", serif;
}


.social-icons a {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
margin: 20px;
border: 1px;
transition: all 0.2s ease-in;
}


.social-icons i {
color: black;
font-size: 1.5rem;
transition: all 0.2s ease-in;
}


.social-icons a:hover {
background-color: white;
border: 2px solid rgb(255, 255, 255);
border-radius: 20px;
}


.social-icons a:hover i {
color: rgb(255, 255, 255);
}


.drets {
font-size: 15px;
color: #000000;
}